<template>
  <div class="recommend-item" @click="goDetail(collectionNum, likeNum)">
    <div class="pic-video">
      <van-image lazy-load fit="cover" :src="`http://pic.angelboy.cn/web/${image}.jpg`" />
      <div class="video-icon" v-if="recommendInfo.type == 3 || recommendInfo.videourl"></div>
      <div class="like-collection">
        <div class="like-box">
          <span class="icon"></span>
          <span class="likeNum">{{ likeNum }}</span>
        </div>
        <div class="collection-box">
          <span class="icon"></span>
          <span class="collectionNum">{{ collectionNum }}</span>
        </div>
      </div>
    </div>
    <div class="recommend-box">
      <div class="recommend-desc">
        <h3 class="title">{{ title }}</h3>
        <div class="desc">{{ desc }}</div>
      </div>
      <div class="recommend-author">
        <div class="head-pic">
          <van-image lazy-load round fit="fill" :src="`http://pic.angelboy.cn/web/${userImage}.jpg`" />

          <span v-if="recommendInfo.userType != 'Rookie'"></span>
        </div>
        <div class="author-name">{{ userName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'daily-recommend',
  props: {
    recommendInfo: {
      type: Object,
      require: true
    },
    image: {
      type: String,
      require: true
    },
    likeNum: {
      type: [String, Number],
      require: true
    },
    collectionNum: {
      type: [String, Number],
      require: true
    },
    title: {
      type: String,
      require: true
    },
    desc: {
      type: String,
      require: true
    },
    userImage: {
      type: String,
      require: true
    },
    userName: {
      type: String,
      require: true
    }
  },
  methods: {
    goDetail(collectionNum, likeNum) {
      this.$router.push({
        path: `/videodetail/${this.recommendInfo.id}`,

        query: {
          collectionNum,
          likeNum
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.recommend-item {
  padding: 0 10px 10px;
  background-color: white;

  .van-image {
    height: 100%;
    width: 100%;

    /deep/ .van-image__img {
      width: 100%;
      height: 100%;
    }
  }

  .pic-video {
    height: 190px;
    width: 100%;
    position: relative;

    .video-icon {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      background-image: url('@/assets/home/video_icon.png');
      background-position: center;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      z-index: 998;
    }

    .like-collection {
      z-index: 999;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 30px;
      width: 100%;
      display: flex;
      padding-right: 10px;
      justify-content: flex-end;
      align-items: center;
      color: white;
      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

      .like-box,
      .collection-box {
        display: flex;
        margin-right: 10px;
        align-items: center;

        .icon {
          width: 12px;
          height: 12px;
          margin-right: 5px;
          background-size: cover;
          background-repeat: no-repeat;
        }

        span.likeNum,
        span.collectionNum {
          font-size: 12px;
        }
      }

      .like-box .icon {
        background-image: url('@/assets/home/home_thumb_able.png');
      }
      .collection-box .icon {
        background-image: url('@/assets/home/home_collect_able.png');
      }
    }
  }

  .recommend-box {
    padding: 10px;
    display: flex;
    height: 110px;
    justify-content: space-between;

    .recommend-desc {
      flex: 7;
      margin-right: 10px;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: black;
        line-height: 30px;
        overflow: hidden;
        max-width: 230px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .desc {
        font-size: 12px;
        color: #444;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis; /*显示为......*/
        -webkit-line-clamp: 3; /*显示为两行，在第二行中显示为.......*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }

    .recommend-author {
      flex: 2;

      .head-pic {
        height: 67px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;

        /deep/ .van-image__img {
          width: 47px;
          height: 47px;
        }

        span {
          position: absolute;
          right: 5px;
          bottom: 5px;
          width: 20px;
          height: 20px;
          background-image: url('@/assets/home/vip.png');
          background-size: cover;
          background-repeat: no-repeat;
        }
      }

      .author-name {
        font-size: 16px;
        color: #999;
        width: 67px;
        padding-top: 3px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
